<template>
  <el-popconfirm
    :width="props.width"
    :icon="InfoFilled"
    icon-color="#626AEF"
    :title="props.txt"
    @cancel="onCancel"
    @confirm="onConfirm"
    :confirm-button-text="props.btnTrue"
    :cancel-button-text="props.btnFalse"
  >
    <template #reference>
      <slot name="content"></slot>
    </template>
  </el-popconfirm>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { InfoFilled } from "@element-plus/icons-vue";
import { ConfirmModel } from "@/types/components";

// 接受父组件参数，withDefaults:设置默认值
const props = withDefaults(defineProps<ConfirmModel>(), {
  txt: "确认删除吗?",
  btnTrue: "确定",
  btnFalse: "取消",
  width: 220,
});
const clicked = ref(false);
function onCancel() {
  clicked.value = true;
}

// 注册事件(将组件处理放置到调用组件的vue中进行处理)
const emit = defineEmits(['onConfirm'])
// 确定
const onConfirm = ()=>{
    emit('onConfirm')
}
</script>
